<template>
	<gui-page :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gFixedTop>
			<gui-a-header title="找企业"></gui-a-header>
			<view class="bgfff">
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :customClass="['bgfff','border']" :kwd="query.companyName" @confirm="confirm"
							@clear="clear" @inputting="inputting" borderRadius="14rpx" height="53rpx"
							placeholder="输入关键字，搜索您想要的" placeholderClass="plStyle"></gui-search2>
					</view>
					<button class="saveBtn" @click="reload(false)">搜索</button>
				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="company-list">
				<view v-if="loading">
					<view class="news-list gui-flex gui-rows gui-nowrap mt20" v-for="(itm, index) in 10" :key="index">
						<view class="skeleton gui-flex gui-align-items-center">
							<gui-skeleton :canShow="false" :customClass="[]"
								customStyle="height:122rpx; border-radius:6rpx;width: 122rpx;background: #efefef;"></gui-skeleton>
							<view style="width: 20rpx;"></view>
							<view>
								<gui-skeleton :canShow="false" :customClass="[]"
									customStyle="height:40rpx; border-radius:6rpx;width: 188rpx;margint-left: 20rpx;background: #efefef;"></gui-skeleton>
								<view style="height: 20rpx;"></view>
								<gui-skeleton :canShow="false" :customClass="[]"
									customStyle="height:40rpx;width:450rpx;border-radius:6rpx;margint-left: 20rpx;background: #efefef;"></gui-skeleton>
							</view>
						</view>
					</view>
				</view>
				<gui-empty v-if="noData">
					<template v-slot:img>
						<view class="gui-flex gui-rows gui-justify-content-center">
							<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
							</image>
						</view>
					</template>
					<template v-slot:text>
						<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
					</template>
				</gui-empty>
				<view class="company-item flex-ac-jb bgfff radius" v-for="(item, index) in dataList" :key="item.id"
					@tap="$u.to(`/pages/mine/company-collect-detail?id=${item.id}`)">
					<view class="company-headImg">
						<gui-image :src="item.logo" :width="122" :height="122" borderRadius="14rpx"
							mode="aspectFill"></gui-image>
					</view>
					<view class="company-info flex1 flex-dc">
						<text class="gui-bold">{{item.companyName}}</text>
						<text class="c666 f22">{{item.industry}}/{{item.personnel}}</text>
						<view class="flex-ac-row f18" v-if="item.welfareTreatment">
							<view class="post-label c999" v-for="(wItem,wIndex) in item.welfareTreatment.split(',')" :key="wIndex">{{wItem}}</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		getUsertConpanyInfoList
	} from '@/api/user.js';
	const $u = reactive(inject('$u'))
	const guipage = ref(null);
	const loading = ref(true);
	
	const reload = (isRelod = true) => {
		query.value.pageNum = 1;
		loadData(isRelod);
	}
	const query = ref({
		pageNum: 1,
		pageSize: 10,
		companyName: ''
	})
	
	// 搜索框输入
	const inputting = (e) => {
		query.value.companyName = e;
	}
	// 搜索框确认
	const confirm = (e) => {
		console.log(e);
		query.value.companyName = e;
		reload(false);
	}
	// 搜索清空
	const clear = (e) => {
		query.value.companyName = '';
		reload(false);
	}
	
	const apiLoadingStatus = ref(false)
	const noData = ref(false);
	const dataList = ref([])
	
	// 查询
	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		getUsertConpanyInfoList(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}
				else {
					loading.value = false;
					dataList.value = [];
					dataList.value = resultArr;
					// 刷新
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		})
	}
	loadData();
</script>

<style lang="scss">
	.search {
		padding: 28rpx 14rpx 24rpx 36rpx;

		.border {
			border: 1px solid #ccc;
		}

		.saveBtn {
			width: 97rpx;
			height: 53rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
		}
	}

	.saveBtn {
		width: 130rpx;
		height: 43rpx;
		border-radius: 14rpx;
		font-size: 20rpx;
		background: rgba(64, 114, 254, 1);

		.icon {
			width: 20rpx;
			margin-left: 10rpx;
		}
	}

	.skeleton {
		background: #fff;
		padding: 0 40rpx;
		height: 200rpx;
	}
</style>